import React from 'react';
import classNames from 'classnames';
import {
  ListGroup,
  ListGroupItem
} from 'react-bootstrap';

import RechargeSelector from '../components/RechargeSelector';

class DialogRechargeContent extends React.Component {

  constructor(){
  	super();
    this.state = {
      activeIndex : 0
    };
  }

  onSelectorClick(item){
    let {items, activeIndex = 0, onRechargeTypeClick} = this.props;
    for(let i = 0, len = items.length; i< len; i++){
       let current = items[i];
       if (current.name === item.name) {
          this.setState({
            activeIndex : i
          });
          break;
       }
    }

    onRechargeTypeClick(item);
  }
  
  render(){

      let {data, items } = this.props;

      return (
      	<div>
      		<div className="recharge-dialog-price text-primary">
      			需要支付：<span className="text-danger">{parseFloat(data.money).toFixed(2)}</span>&nbsp;元
      		</div>
      		<ListGroup>
	      		{
	      			items && items.map(
	      				(item, i) => {
                    let active = false;
                    if(i === this.state.activeIndex){
                        active = true;
                    }
                    return (
                      <RechargeSelector active={active} item={item} onSelectorClick={this.onSelectorClick.bind(this)} />
                    );
                }
	      			)
	      		}
	      	</ListGroup>
      	</div>
      );
  }
}

export default DialogRechargeContent;